<template>
  <div class="app-container">
    <div ref="refsTable">
      <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" v-show="showSearch"
        label-width="68px">
        <el-form-item label="登记时间">
          <el-date-picker v-model="dateRange" style="width: 370px" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="平台类型" prop="platformTypeId">
          <el-select v-model="queryParams.platformTypeId" clearable style="width: 100%">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in platformTypeList" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <div style="display: inline">
          <el-form-item prop="startExperimentNumber">
            <el-input v-model="queryParams.startExperimentNumber" placeholder="起始编号" clearable
              style="width: 150px;margin-left:10px;margin-right: 10px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item prop="endExperimentNumber">
            <el-input v-model="queryParams.endExperimentNumber" placeholder="结束编号" clearable style="width: 150px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </div>
        <!-- <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 205px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in statusType" :key="item.status" :label="item.title" :value="item.status" />
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="printDialog">
        
        <div id="printTest">
          <div style="height:60px ;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:12px;transform:scale(0.8);margin-bottom:15px" v-for="el in barcodeList">
            <div  >{{el}}</div>
          </div>　　　
　　　　</div>
<span slot="footer" class="dialog-footer">
          <el-button v-print="'#printTest'" size="mini">打印</el-button>         
        </span>
      </el-dialog>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          
          <el-button type="primary" icon="el-icon-printer" size="mini"  @click="handleBatchBarcodePrinting">批量条码打印
          </el-button>
          <el-button type="primary" icon="el-icon-printer" size="mini" @click="handleBatchExperimentNumberPrinting">
            批量实验室编号打印</el-button>
        </el-col>

      </el-row>
    </div>

    <el-table :row-class-name="rowStyle" border highlight-current-row v-loading="loading" :data="typeList"
      @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
        background: '#ebebeb'
      }">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" />
      <af-table-column label="条码号" align="center" prop="barcodeCode" width="120" />
      <af-table-column label="项目类型" width="450" align="center" prop="projectTypeName" >
      </af-table-column>
      <af-table-column label="实验编号" align="center" prop="experimentNumber" />
      <af-table-column label="平台类型" align="center" prop="platformTypeName" />
      <af-table-column label="核酸类型" align="center" prop="nucleicTypeName" width="100" />
      <af-table-column label="样本类型" align="center" prop="sampleTypeName" />
      <af-table-column label="登记时间" align="center" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registrationTime) }}</span>
        </template>
      </af-table-column>
    </el-table>

    <div>
      <pagination   style="margin:0;padding: 0;" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { barcodePrintingList, BatchBarcodePrinting, BatchExperimentNumberPrinting } from "@/api/auxiliary/assistManagement/print"

export default {
  name: "print",
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示查询条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        platformTypeId: '',
        startExperimentNumber: undefined,
        endExperimentNumber: undefined,
        status: ''
      },
      statusType: [
        {
          title: '开启',
          status: 1
        },
        {
          title: '禁用',
          status: 0
        }
      ],
      platformTypeList: [
        {
          title: '微生物',
          id: 1
        },
        {
          title: '肿瘤',
          id: 2
        },
        {
          title: '科研',
          id: 3
        }
      ],
      // rules: {
      //   startExperimentNumber: [
      //     { required: true, message: "请输入起始编号", trigger: "blur" }
      //   ],
      //   endExperimentNumber: [
      //     { required: true, message: "请输入结束编号", trigger: "blur" }
      //   ]
      // },
      heights: undefined,
      barcodeList:[],
      printDialog:false
    }
  },
  created () {
    this.dateRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime()
      // new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000
    );
    this.dateRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000
      // new Date(new Date().toLocaleDateString()).getTime() - 1000
    );
    this.getList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      }
    })
  },
  methods: {
    /** 查询条码/实验编号列表 */
    getList () {
      this.loading = true
      barcodePrintingList(this.addNewDateRange(this.queryParams, this.dateRange)).then(response => {
        this.typeList = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    // 表单重置
    reset () {
      this.form = {
      }
      this.resetForm("form")
    },
    /** 查询按钮操作 */
    handleQuery () {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.queryParams.pageNum = 1
          this.getList()
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {

      console.log(selection)
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 批量打印条码 */
    handleBatchBarcodePrinting () {
      const queryParams = this.queryParams
      this.$confirm('是否确认打印所有数据项的条码?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {       
        return BatchBarcodePrinting(queryParams)
      }).then(res => {
        console.log(res.rows)
        this.barcodeList=res.rows
        this.printDialog=true
      })
    },
    /** 批量打印实验编号 */
    handleBatchExperimentNumberPrinting () {
      const queryParams = this.queryParams
      this.$confirm('是否确认打印所有数据项的实验编号?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return BatchExperimentNumberPrinting(queryParams)
      }).then(res => {
        console.log(res.rows, '2')
        this.barcodeList=res.rows
        this.printDialog=true
      })
    },
    rowStyle ({ row }) {
      var arr = this.ids
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle"
        }
      }
    },
  }
}
</script>
<style scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.app-container {
  height: 85vh;
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}

::v-deep .rowStyle {
  background-color: #a8d6fe !important;
}

::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}
</style>
